<template>
  <div class="tender-details">
    <div class="breadcrumb-link">
      <span @click="fallBack" style="cursor: pointer;">{{$t('bidding.BiddingInformation')}}</span>
      <i class="el-icon-arrow-right"></i>
      <span>{{$t('route.TenderDetails')}}</span>
    </div>
    <div class="project-header">
      <div class="project-title">
        <span class="title">{{TenderDetailsData.project_name}}</span>
        <span>项目编号：{{TenderDetailsData.project_code}}</span>
        <span>开标时间：{{TenderDetailsData.bid_open_date}}</span>
      </div>
      <div class="project-tags">
        <span v-for="tag in TenderDetailsData.relevant" :key="tag" v-if="tag!==''">{{tag}}</span>
      </div>
      <div class="collection">
        <i class="iconfont icon-xingxing1" :class="{'collection-detail': collectionDetail !== 0}" @click="changeCollectionState"></i>
      </div>
    </div>
    <div class="project-info">
      <div class="feedback" @click="feedback">反馈</div>
      <BiddingFeedback :feedbackName="$t('bidding.TenderFeedback')" :showFeedback="showFeedback"
                       :checkboxOptions="checkboxOptions"
                       @hideFeedback="hideFeedback"></BiddingFeedback>
      <h3 style="margin:0;">采购消息</h3>
      <p>采购产品</p>
      <el-table class="table-lf"
                :data="tableDataProduct"
                ref="productTable"
                border
                style="width: 260px;">
        <el-table-column
          type="index"
          width="130">
        </el-table-column>
        <el-table-column
          prop="name"
          label="产品名称">
        </el-table-column>
      </el-table>
      <el-table class="table-rt"
                v-if="tableDataPackage.length!==0"
                :data="tableDataPackage"
                ref="packageTable"
                border
                :span-method="objectSpanMethod"
                style="width: 390px;">
        <el-table-column
          prop="package_num"
          label="包号"
          width="130">
        </el-table-column>
        <el-table-column
          prop="product"
          label="产品名称"
          width="130">
        </el-table-column>
        <el-table-column
          prop="number"
          label="采购数量">
        </el-table-column>
      </el-table>
      <div class="info-summary">
        <span>采购总预算：{{TenderDetailsData.purchase_budget}} RMB</span>
        <span>采购方式：{{TenderDetailsData.purchase_way}}</span>
      </div>
    </div>
    <div class="project-info" style="padding: 10px 20px;">
      <h3 style="margin:0;">采购单位</h3>
      <p>采购单位名称: {{TenderDetailsData.purchase_company_name}}</p>
      <p>采购单位地址: {{TenderDetailsData.purchase_company_address}}</p>
      <p>
        <span style="margin-right:44px;">联系人：{{TenderDetailsData.purchase_contact_name}}</span>
        <span>联系方式：{{TenderDetailsData.purchase_company_phone}}</span>
      </p>
      <h3>代理机构</h3>
      <p>代理机构名称: {{TenderDetailsData.agency_name}}</p>
      <p>代理机构地址: {{TenderDetailsData.agency_address}}</p>
      <p>
        <span style="margin-right:44px;">联系人：{{TenderDetailsData.agency_contact_name}}</span>
        <span>联系方式：{{TenderDetailsData.agency_phone}}</span>
      </p>
    </div>
    <div class="project-info" style="padding: 10px 20px">
      <h3 style="margin-top: 0">原文</h3>
      <div v-html="TenderDetailsData.content_html">

      </div>
    </div>
  </div>
</template>

<script>
  import BiddingFeedback from './components/BiddingFeedback'
  import {mapGetters} from 'vuex'
  import {getBiddingParams,getUsername} from "../../../utils/auth";
  export default {
    name: "TenderDetails",
    data(){
      return {
        biddingParams: {}, // session得到的对象
        checkboxOptions: ['招标编号', '采购单位名称', '预算', '开标时间'],
        collectionDetail: false, // 收藏
        uuid: '',
        TenderDetailsData: {},
        projectTags: ['智慧校园', '信息化建设', '高性能', '大数据'],
        tableDataProduct: [],
        tableDataPackage: [],
        showFeedback: false
      }
    },
    components: {
      BiddingFeedback
    },
    methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if(columnIndex === 0){
            if(row.package_len){
              return {
                rowspan: row.package_len,
                colspan: 1
              };
            }else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }

        }
          },
      async loadData(){
        let params = {
          uuid: this.uuid,
          type: '招标公告'
        };
        try {
          let res = await this.axios.post('/newBidding/bidDetail', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.TenderDetailsData = resData.data;
//            console.log(this.TenderDetailsData, 'wwwwwwww');
            this.tableDataProduct = this.TenderDetailsData['purchase_goods'].map(item => {
              return {name: item}
            });
            let packageInfoData=this.TenderDetailsData['package_info'];
            let arr2 = [];
            for (let i = 0; i < packageInfoData.length; i++) {
              let brr = [];
              packageInfoData[i].product_info.forEach((item, index) => {
                if (index === 0) {
                  brr.push({
                    package_num: packageInfoData[i].package_num,
                    package_len:packageInfoData[i].product_info.length,
                    ...item
                  });
                } else {
                  brr.push({
                    ...item
                  });
                }
              });
              arr2 = arr2.concat(brr);
            }
            this.tableDataPackage=arr2
          }
        } catch (e) {
          console.log(e);
        }
      },
      fallBack() {
        this.$router.go(-1)
      },
      async sendFeedback(data){
        let params = {
          uuid: this.uuid,
          type: '招标公告',
          ...data
        };
        try {
          let res = await this.axios.post('/newBidding/submitFeedback', params);
          let resData=res.data;
          if(resData.status===200){
            if(resData.data.data==='success'){
              return true
            }else {
              return false
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      hideFeedback(data) {
        if (data) {
          let sendResult=this.sendFeedback(data);
          if(sendResult){
            this.$toast(this.$t("feedback.success"),'success')
          }else {
            this.$message.error(this.$t("feedback.fail"));
          }
        }
        this.showFeedback = false
      },
      // async changeCollectionState() {
      //   if (this.collectionDetail === 0 ) {
      //     this.collectionDetail = 1
      //     let params = {
      //       bulletin_id: this.biddingParams.uuid,
      //       bulletin_name: this.biddingParams.title,
      //       bulletin_type: this.biddingParams.status,
      //       region: this.biddingParams.area_name,
      //       publish_time: this.biddingParams.publish_date
      //     }
      //     let res = await this.axios.post('bidding/addAndDeleteCollection', params)
      //     if (res.data.status === 200) {
      //       this.$message.success('收藏成功');
      //     } else {
      //       this.$message.error('收藏失败');
      //     }
      //   } else {
      //     this.collectionDetail = 0
      //     let res = await this.axios.post('bidding/deleteMyCollection', {bulletin_id: this.biddingParams.uuid})
      //     if (res.data.status === 200) {
      //       this.$message.warning('取消收藏成功');
      //     } else {
      //       this.$message.error('取消收藏失败');
      //     }
      //   }
      // },
      async changeCollectionState() {
        let params = {
          object_id: this.biddingParams.uuid,
          username: getUsername()
        }
        if (this.collectionDetail === 0 ) {
          this.collectionDetail = 1
          let res = await this.axios.post('collectionBidding/addAndDeleteCollection', params)
          if (res.data.status === 200) {
            this.$message.success('收藏成功');
          } else {
            this.$message.error('收藏失败');
          }
        } else {
          this.collectionDetail = 0
          let res = await this.axios.post('collectionBidding/addAndDeleteCollection', params)
          if (res.data.status === 200) {
            this.$message.warning('取消收藏成功');
          } else {
            this.$message.error('取消收藏失败');
          }
        }
      },
      feedback () {
        this.showFeedback = true
      },
      tableResize(){
        this.$refs.productTable.doLayout();
        this.$refs.packageTable.doLayout();
        this.$refs.expertsTable.doLayout();
      }
    },
    created() {
      this.biddingParams = JSON.parse(getBiddingParams())
      this.collectionDetail = this.biddingParams.collect
    },
    beforeMount(){
      this.uuid = this.$route.query.id;
    },
    mounted(){
      this.loadData();
      window.onresize = () => {
        this.tableResize()
      }
    },
    computed: {
      ...mapGetters(
        ['sidebar']
      )
    },
    watch: {
      'sidebar.opened': function (newVal) {
        this.tableResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tender-details {
    padding: 20px;
    .breadcrumb-link {
      font-family: OpenSansShin;
      font-size: 20px;
      color: #FF5B00;
    }
    .project-header {
      position: relative;
      margin-top: 12px;
      padding: 20px;
      background: rgba(16, 142, 233, 0.12);
      border-radius: 6px 6px 0 0;
      .project-title {
        span {
          margin-right: 20px;
          font-family: OpenSans-Bold;
          display: inline-block;
          overflow: hidden;
          font-weight: bold;
          font-size: 14px;
          color: #000000;
        }
        .title {
          font-size: 20px;
          max-width: 50vw;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .project-tags {
        margin-top: 10px;
        span {
          display: inline-block;
          margin-right: 22px;
          padding: 2px;
          font-family: OpenSans;
          font-size: 14px;
          color: #FFFFFF;
          background-color: #0090e9;
        }
      }
      .collection {
        position: absolute;
        top: 20px;
        right: 48px;
        .icon-xingxing1 {
          display: inline-block;
          transform: scale(1.5, 1.5);
          padding-left: 5px;
          cursor: pointer;
          color: #b8b8b8;
        }
        .collection-detail {
          color: #f0ba00;
        }
      }
    }
    .project-info {
      background-color: #fff;
      padding: 20px;
      .feedback {
        position: fixed;
        top: 215px;
        right: 55px;
        z-index: 999;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        line-height: 48px;
        text-align: center;
        font-family: OpenSans-Bold;
        font-size: 16px;
        color: #FFFFFF;
        background: #FF9C15;
      }
      h3 {
        font-family: OpenSans-Bold;
        font-size: 18px;
        color: #333333;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #666666;
      }
      .info-summary {
        clear: both;
        position: relative;
        top: 10px;
        span {
          margin-right: 64px;
          font-family: OpenSans;
          font-size: 16px;
          color: #666666;
        }
      }
      .table-lf {
        float: left;
        margin-right: 5%;
      }
      .table-rt {
        float: left;
      }
    }
  }

</style>
